<template>
  <div>
       <hr>
      <h1>我是子组件</h1>
      <h1>{{myname}}{{myage}}</h1>
      <div>
        <h1 v-for="item in list" :key="item">{{item}}</h1>
      </div>
      <input type="text" required>
      <h1 @click="say('你好')">{{msg}}</h1>
      <button @click="send">给父组件传数据</button>
      <hr>
  </div>
</template>

<script>
export default {
  name: '2209vueOrderSon',

  data() {
    return {
      msg:"子组件的数据",
      // 2. 子组件像父组件传递数据 是通过父组件先定义自定事件  子组件通过this.$emit()触发自定义事件 并传递数据 
      zdata:"哈喽",
      zTitle:"子组件传来的标题",
      zList:["关羽","张飞","赵云","马超","黄忠"],
      zname:"迈克乔丹"
    };
  },
  // props:["myname","list","myage"], //父传子数据  使用props传参
            // 首先在子组件设置props
  // props:{ //第二种props写法
    // myname:String,
    // list:Array,
    // myage:Number
  // }，
  props:{
      myname:{
        type:String|Number,//类型
        default:"小王",//默认值
        required:true//必传项
      },
      list:{
        type:Array,
        default(){ //数组和对象类型的props必须default函数返回值形式
          return []
        },
          required:true//当前props必传项
      },
      myage:{
        type:Number,
        default:100,
        required:true
      }
  },
  created() {
    // 进入组件就给父组件传递的数据
    this.$emit("ldata",this.zname)
  },
  mounted() {
    
  },

  methods: {
    say(word){
      console.log("子组件说"+word)
    },
    send(){
      // 子组件通过this.$emit() 触发父组件的自定义事件并传递数据  this.$emit("事件名",数据1,数据2，数据3)
      this.$emit("sendData",this.zdata,this.zTitle,this.zList)
    }
  },
};
</script>